<template>
    <div class="fomeMain">
        <el-form ref="dfome" :inline="true" :model="form" label-width="100px" :rules="rulesForm">
            <div v-for="(item ,index) in form.dynamicsItem" :key="index">
                <pro-select v-model="item.name" :prop="'dynamicsItem.' + index + '.name'" label="规则" :dataSource="getFromStaticDataSource" :rules="[{ required: true, message: '请选择校验类型', trigger: 'blur' }]" @change="changeName(item,index)"></pro-select>

                <template v-if="form.dynamicsItem[index].name">
                    <pro-input v-for="(rule,rindex) in form.dynamicsItem[index].rule" :key="index" v-if="rule.type == 'regular' || rule.type == 'regular1'" v-model="rule.name" :label="rule.label" :prop="'dynamicsItem.' + index + '.rule.' + rindex + '.name'" :rules="[{ required: true, message: '请选择校验规则', trigger: 'blur' }]"></pro-input>
                </template>

                <el-form-item>
                    <pro-action v-if="index+1 == form.dynamicsItem.length" @handler="addItem" type="primary">增加</pro-action>
                    <pro-action v-if="index != 0" @handler="deleteItem(item,index)" type="danger">删除</pro-action>
                </el-form-item>
            </div>
        </el-form>

        <div class="fomeMain_submit">
            <pro-action shouldConfirmTxt="确定提交吗?" type="primary" @handler="submitForm('dfome')">确定</pro-action>
            <pro-action @handler="handleClose">取消</pro-action>
        </div>
    </div>
</template>
<script>
    import dataSource from "mars-pro/src/pro/mixins/dataSource/index";
    // import {post} from 'mars-pro/src/pro/request';
    import createState from 'mars-pro/src/pro/createState';

    export default {
        name:"动态表单",
        desc:"动态新增删除表单",
        screenshot:"https://img.alicdn.com/imgextra/i4/O1CN01viScHq1xQC8KtFTIH_!!6000000006437-2-tps-1811-904.png",
        mixins:[
            dataSource('getFromStaticDataSource', [{name: '正则', code: 'regular'},{name: '正则1', code: 'regular1'}], {fieldMap:{label: 'name', value: 'code'}})
        ],
        data(){
            return {
                rulesForm:[],
                dialogVisible:false,
                form:createState({
                    dynamicsItem:[
                        {
                            name:'',
                            rule:[]
                        }
                    ]
                }),
                ruleCom:{
                    regular:{
                        name:'',
                        type:'regular',
                        label:'正则表达式'
                    },
                    regular1:{
                        name:'',
                        type:'regular1',
                        label:'正则表达式1'
                    }
                }
            }
        },
        methods:{
            addItem(){
                this.form.dynamicsItem.push(
                    {
                        name:'',
                        rule:[]
                    }
                )
            },
            deleteItem(item,index){
                this.form.dynamicsItem.splice(index,1)
            },
            changeName(item,index){
                // alert(item.name)
                if(item.rule.length > 0){
                    item.rule = []
                }
                if(item.name == 'regular'){
                    item.rule.push(
                        JSON.parse(JSON.stringify(this.ruleCom.regular))
                    )
                }else if(item.name == 'regular1'){
                    item.rule.push(
                        JSON.parse(JSON.stringify(this.ruleCom.regular1))
                    )
                }
            },
            submitForm (form){
                this.$refs[form].validate(valid => {
                    if(valid){
                        alert('submit')
                    }else{
                        alert('error submit')
                        return false;
                    }
                })
            },
            handleClose(){
                alert('handleClose')
            }
        }
    }
</script>
<style lang="scss">
.clearfix{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.enclosure{
    margin-bottom: 20px;
}
.fomeMain{
    height: 100%;
    position: relative;
    padding-bottom: 58px;
    &_collapse{
        height: 100%;
        overflow: auto;
    }
    &_submit{
        height: 48px;
        position: absolute;
        left:0;right:0;bottom:0;
    }
}
</style>